<template>
  <div class="home">
    <!-- 顶部标签栏 -->
    <div class="home-top">
      <!-- 城市位置 -->
      <router-link tag="div" to="/home/city" class="city">{{city}}</router-link>
      <!-- 商品搜索 -->
      <div class="search">
        <van-search v-model="value" placeholder="搜索商品" @click="searchEvents" />
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="2500" indicator-color="#000">
        <van-swipe-item v-for='item in bannerList' :key='item.id'>
          <img :src="item.image_url" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 子导航 -->
    <div class="subnav">
      <van-grid clickable :column-num="5" :border='false'>
        <van-grid-item class="item" text="路由跳转" :to="`/category/categoryList?id=${item.id}`" v-for='item in subnavList' :key='item.id'>
          <img :src="item.icon_url" alt="">
          <div class="name">{{item.name}}</div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 内容 -->
    <div class="content">
      <!-- 品牌制造商直供 -->
      <div class="brand">
        <router-link class="title" tag="div" to="/home/brand">品牌制造商直供</router-link>
        <div class="list">
          <router-link tag="div" class="item" :to="`/home/brand/brandInfo?id=${item.id}`" v-for='item in brandList' :key='item.id'>
            <img :src="item.new_pic_url" alt="">
            <div class="info">
              <div class="name">{{item.name}}</div>
              <div class="price">{{item.floor_price}}元起</div>
            </div>
          </router-link>
        </div>
      </div>
      <!-- 新品首发 -->
      <div class="newgoods">
        <router-link class="newgoods-top" tag="div" to="/home/goods?id=1">
          <div class="title">新品首发</div>
          <van-button class="btn" type="default">查看全部</van-button>
        </router-link>
        <div class="box">
          <div class="list">
            <router-link tag="div" class="item" :to="`/home/goods/detail?id=${item.id}`" v-for='item in newgoodsList' :key='item.id'>
              <img :src="item.list_pic_url" alt="">
              <div class="info">
                <div class="name">{{item.name}}</div>
                <div class="brief">{{item.goods_brief}}</div>
                <div class="price">￥{{item.retail_price}}</div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 人气推荐 -->
      <div class="hotgoods">
        <router-link tag="div" to="/home/goods?id=2" class="hotgoods-top">
          <div class="title">
            人气推荐
            <span></span>
            好物精选
          </div>
          <van-button class="btn" type="default">查看全部</van-button>
        </router-link>
        <div class="box">
          <div class="list">
            <router-link tag="div" class="item" :to="`/home/goods/detail?id=${item.id}`" v-for='item in hotgoodsLsit' :key='item.id'>
              <img :src="item.list_pic_url" alt="">
              <div class="info">
                <div class="name">{{item.name}}</div>
                <div class="brief">{{item.goods_brief}}</div>
                <div class="price">￥{{item.retail_price}}</div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 专题精选 -->
      <div class="topicList">
        <router-link tag="div" to="/topic" class="topicList-top">
          专题精选
          <img src="../../assets/images/right.png" alt="">
        </router-link>
        <div class="box">
          <div class="list">
            <router-link class="item" tag="div" :to="`/topic/topicDetail?id=${item.id}`" v-for='item in topicList' :key='item.id'>
              <img :src="item.scene_pic_url" alt="">
              <div class="info">
                <div class="left">
                  <div class="title">{{item.title}}</div>
                  <div class="subtitle">{{item.subtitle}}</div>
                </div>
                <div class="price">{{item.price_info}}元起</div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 分类好物 -->
      <div class="newcategory">
        <div class="list" v-for='items in newCategoryList' :key='items.id'>
          <div class="title">{{items.name}}好物</div>
          <div class="sublist">
            <router-link :to="`/home/goods/detail?id=${item.id}`" tag="div" class="item" v-for='item in items.goodsList' :key='item.id'>
              <img :src="item.list_pic_url" alt="">
              <div class="name">{{item.name}}</div>
              <div class="price">￥{{item.retail_price}}</div>
            </router-link>
            <router-link :to="`/category/categoryList?id=${items.id}`" tag="div" class="right">
              <div class="title-bottom">{{items.name}}好物</div>
              <img src="../../assets/images/rightbig.png" alt="">
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/home";
export default {
  name: "home",
  data() {
    return {
      value: "", // 搜索
      city: "", // 城市位置
      bannerList: [], // 轮播图
      subnavList: [], // 子导航
      brandList: [], // 品牌制造商直供
      newgoodsList: [], // 新品首发
      hotgoodsLsit: [], // 人气推荐
      topicList: [], // 专题精选
      newCategoryList: [], // 分类
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {
    // 首页相关数据
    index({}).then((res) => {
      this.bannerList = res.data.banner;
      this.subnavList = res.data.channel;
      this.brandList = res.data.brandList;
      this.newgoodsList = res.data.newGoods;
      this.hotgoodsLsit = res.data.hotGoods;
      this.topicList = res.data.topicList;
      this.newCategoryList = res.data.newCategoryList;
    });
  },
  // 准备
  mounted() {
    var cityInfo = this.$store.state.cityInfo;
    // 若已存在城市信息，则直接赋值 否则IP定位当前城市
    if (cityInfo.name) {
      this.city = cityInfo.name;
    } else {
      // IP定位获取当前城市信息
      var _this = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            _this.city = result.city;
          }
        });
      });
    }
  },
  // 方法
  methods: {
    // 跳转搜索页面
    searchEvents() {
      this.$router.push("/home/search");
    },
  },
};
</script>

<style lang='scss' scoped>
.home {
  // 顶部
  .home-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;
    .city {
      width: 20%;
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 5px;
    }
    .search {
      width: 80%;
    }
  }
  // 轮播图
  .banner {
    margin-top: 54px;
    .my-swipe {
      height: 200px;
      img {
        width: 100%;
      }
      // 样式穿透 修改指示器背景色
      ::v-deep .van-swipe__indicator {
        background-color: #bababa;
      }
    }
  }
  // 子导航
  .subnav {
    .item {
      img {
        width: 30px;
        height: 30px;
      }
      .name {
        font-size: 12px;
        margin-top: 16px;
      }
    }
  }
  // 内容
  .content {
    background-color: #f4f4f4;
    overflow: hidden;
    // 品牌制造商直供
    .brand {
      background-color: #fff;
      margin-top: 8px;
      .title {
        padding: 20px 0;
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 2px;
        .item {
          position: relative;
          width: 178px;
          height: 116px;
          margin: 2px;
          img {
            width: 100%;
          }
          .info {
            position: absolute;
            top: 15px;
            left: 10px;
            text-align: left;
            div {
              margin: 5px 0;
            }
          }
        }
      }
    }
    // 新品首发
    .newgoods {
      .newgoods-top {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
        width: 100%;
        height: 122px;
        background-color: #f0f7fd;
        color: #8c9bae;
        overflow: hidden;
        margin-top: 10px;
        .title {
          font-size: 16px;
        }
        .btn {
          width: 90px;
          height: 24px;
          color: #8c9bae;
          background-color: #d8e4f0;
        }
      }
      .box {
        margin-top: 10px;
        background-color: #fff;
        .list {
          width: 100%;
          display: flex;
          overflow: auto;
          .item {
            width: 140px;
            border-left: 1px solid #f4f4f4;
            margin-left: 12px;
            margin-bottom: 12px;
            img {
              width: 140px;
              height: 140px;
            }
            .info {
              width: 70%;
              margin: 0 auto;
              text-align: left;
              div {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .name {
                font-size: 15px;
                font-weight: bolder;
              }
              .brief {
                margin: 16px auto;
              }
              .price {
                color: #9c3232;
              }
            }
          }
          .item:first-child {
            border-left: 1px solid transparent;
          }
        }
      }
    }
    // 人气推荐
    .hotgoods {
      .hotgoods-top {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
        width: 100%;
        height: 122px;
        background-color: #fef7e3;
        color: #b1a279;
        overflow: hidden;
        margin-top: 10px;
        .title {
          font-size: 16px;
          span {
            display: inline-block;
            width: 2px;
            height: 2px;
            background-color: #b1a279;
            vertical-align: middle;
          }
        }
        .btn {
          width: 90px;
          height: 24px;
          color: #b1a279;
          background-color: #f4e9cb;
        }
      }
      .box {
        margin-top: 10px;
        background-color: #fff;
        .list {
          width: 100%;
          display: flex;
          overflow: auto;
          .item {
            width: 140px;
            border-left: 1px solid #f4f4f4;
            margin-left: 12px;
            margin-bottom: 12px;
            img {
              width: 140px;
              height: 140px;
            }
            .info {
              width: 70%;
              margin: 0 auto;
              text-align: left;
              div {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .name {
                font-size: 15px;
                font-weight: bolder;
              }
              .brief {
                margin: 16px auto;
              }
              .price {
                color: #9c3232;
              }
            }
          }
          .item:first-child {
            border-left: 1px solid transparent;
          }
        }
      }
    }
    // 专题精选
    .topicList {
      margin-top: 10px;
      background-color: #fff;
      .topicList-top {
        padding: 18px;
        img {
          width: 16px;
          height: 16px;
          vertical-align: middle;
        }
      }
      .box {
        .list {
          width: 100%;
          display: flex;
          overflow: auto;
          .item {
            width: 287px;
            height: 250px;
            margin-left: 12px;
            img {
              width: 287px;
              height: 162.5px;
              border-radius: 10px;
            }
            .info {
              font-size: 15px;
              display: flex;
              .left {
                width: 80%;
                text-align: left;
                .title {
                  font-weight: bolder;
                  margin: 4px auto 16px;
                }
                .subtitle {
                  font-size: 12px;
                  color: #8a8a8a;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
              .price {
                width: 20%;
                margin-top: 4px;
                font-size: 12px;
                color: #9c3232;
              }
            }
          }
        }
      }
    }
    // 分类好物
    .newcategory {
      margin-top: 10px;
      .list {
        .title {
          font-size: 14px;
          padding: 12px 0;
        }
        .sublist {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          .item {
            width: 180px;
            height: 215px;
            font-size: 12px;
            margin: 0 0 5px 0;
            background-color: #fff;
            img {
              width: 130px;
              height: 130px;
            }
            div {
              text-align: left;
            }
            .name {
              margin: 15px auto;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              padding: 0 10px;
            }
            .price {
              color: #9c3232;
              margin: 0 auto;
              padding: 0 10px;
            }
          }
          .item:nth-child(2n) {
            margin: 0 0 5px 5px;
          }
          .right {
            width: 180px;
            height: 215px;
            margin: 0 0 5px 5px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            background-color: #fff;
            .title-bottom {
              font-size: 16px;
              margin-bottom: 30px;
            }
            img {
              width: 36px;
              height: 36px;
            }
          }
        }
      }
    }
  }
}
</style>